<template>
    <el-container>
        <!--左侧-->
        <el-aside width="200px">
            <div class="asideTitile">动力云客系统</div>
            <el-menu
                :router="true"
                active-text-color="#409eff"
                background-color="#545c64"
                :default-active="routerPath"
                text-color="#fff"
                unique-opened
                style="border-right: 0 solid">
                <el-sub-menu :index="index" v-for="(menu, index) in userInfo.tMenuPermissionList">
                    <template #title>
                        <el-icon>
                            <component :is="menu.icon"/>
                        </el-icon>
                        <span>{{ menu.name }}</span>
                    </template>
                    <el-menu-item :index="subMenu.url" v-for="subMenu in menu.childPermissionList">
                        <el-icon>
                            <component :is="subMenu.icon"/>
                        </el-icon>
                        {{ subMenu.name }}
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <Service/>
                        </el-icon>
                        <span>智能助手</span>
                    </template>
                    <el-menu-item index="/dashboard/chat">
                        <el-icon>
                            <el-icon>
                                <ChatDotRound/>
                            </el-icon>
                        </el-icon>
                        动力助手
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>

        <!--右侧-->
        <el-container>
            <!--右侧顶部-->
            <el-header>
                <el-dropdown>
                    <span class="el-dropdown-link user-info-text">
                            {{ userInfo.name }}
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu class="user-dropdown-menu">
                            <el-dropdown-item @click='info()'>个人信息</el-dropdown-item>
                            <el-dropdown-item @click='edit()'>修改信息</el-dropdown-item>
                            <el-dropdown-item @click='goHomepage()'>回到首页</el-dropdown-item>
                            <el-dropdown-item @click='logout()'>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!--右侧内容体-->
            <el-main>
                <router-view v-if="showRouter"/>
            </el-main>
            <!--右侧底部-->
            <el-footer>
                @版权所有 动力节点 2009-2099 北京市通州区景盛南二街纳特大厦7层711
            </el-footer>
        </el-container>
    </el-container>
</template>

<script setup>
import {
    Aim, Coin,
    CreditCard, DataAnalysis, Grid,
    Magnet, Memo, OfficeBuilding,
    Paperclip, Postcard, Setting, SetUp, Tools,
    User, UserFilled, Wallet
} from "@element-plus/icons-vue";
import {nextTick, onMounted, provide, ref} from "vue";
import {doGet} from "../http/httpRequest.js";
import {TOKEN} from "../util/constant.js";
import {useRoute, useRouter} from "vue-router";
import {showMessage} from "@/util/message.js";

// 创建响应式变量存储用户信息
let userInfo = ref({});
let router = useRouter();
/**
 * 控制路由视图显示状态的响应式变量
 * true: 显示路由视图
 * false: 隐藏路由视图
 * 用于配合flush方法实现路由组件强制刷新
 */
let showRouter = ref(true);

/**
 * 响应式变量：存储当前路由路径
 * 使用ref创建响应式字符串，初始值为空
 */
let routerPath = ref('');

/**
 * 获取并处理当前路由路径
 * 功能：根据路由层级动态调整显示的路径
 * 处理逻辑：
 * 1. 获取当前路由完整路径
 * 2. 使用 '/' 分割路径为数组
 * 3. 若路径层级大于3级（如 '/a/b/c'），则截取前两级路径
 * 4. 否则直接使用完整路径
 * 注意：当路径层级大于3时直接赋值给routerPath（可能存在响应式失效风险）
 */
const getCurrentRouter = () => {
    let path = useRoute().path; // 获取当前路由路径，useRoute()是Vue Router的组合式API
    let stringPath = path.split('/'); // 将路径按 '/' 分割为数组
    if (stringPath.length > 3) {
        // 路径层级大于3时，拼接前两级路径（如将 '/a/b/c' 处理为 '/a/b'）
        routerPath = '/' + stringPath[1] + '/' + stringPath[2];
    } else {
        // 路径层级小于等于3时，直接使用完整路径（通过.value修改ref值保持响应式）
        routerPath.value = path;
    }
}


/**
 * 组件挂载完成后执行的初始化逻辑
 * 功能：在组件加载完成后执行一次，主要用于初始化数据和状态
 * 处理逻辑：
 * 1. 调用GET请求获取用户信息
 * 2. 检查响应状态码
 * 3. 如果成功，更新用户信息
 * 4. 如果失败，显示错误消息
 * 5. 调用获取当前路由的函数
 */
onMounted(() => {
    // 调用GET请求获取用户信息
    doGet('/api/login/user', {}).then(resp => {
        // 检查响应状态码
        if (resp.data.code == 200) {
            // 请求成功，更新用户信息
            userInfo.value = resp.data.info;
        } else {
            // 请求失败，输出错误信息
            showMessage(resp.data.msg, 'error');
        }
    })
    getCurrentRouter();
})

/**
 * 登出功能函数
 * 功能：调用后端登出接口并清除本地登录状态
 */
const logout = () => {
    // 调用GET类型的登出接口
    // 参数1: 后端登出API的相对路径
    // 参数2: 空对象(GET请求无需请求体)
    doGet('/api/logout', {}).then(resp => {
        // 检查后端返回的状态码
        // 200表示登出接口调用成功
        if (resp.data.code == 200) {
            // 从sessionStorage中移除登录令牌
            // 清除本地存储的用户认证信息
            sessionStorage.removeItem(TOKEN);
            // 重定向到登录页面
            // 强制页面刷新并跳转到根路径('/')
            router.push('/')
        }
    })
}

/**
 * 跳转到用户详情页面
 * 获取当前登录用户的ID，并导航到对应的用户详情路由
 */
const info = () => {
    // 从响应式用户信息对象中获取用户ID
    let id = userInfo.value.id;
    // 使用编程式导航跳转到用户详情页
    router.push('/dashboard/user/' + id);
}

/**
 * 跳转到用户编辑页面
 * 获取当前登录用户的ID，并导航到对应的用户信息编辑路由
 */
const edit = () => {
    // 从响应式用户信息对象中获取用户ID
    let id = userInfo.value.id;
    // 使用编程式导航跳转到用户编辑页
    router.push('/dashboard/user/edit/' + id);
}

/**
 * 跳转到首页
 */
const goHomepage = () => {
    router.push('/dashboard').then(() => {
        location.reload();
    });
}

/**
 * 刷新路由视图组件
 * 通过先隐藏再显示路由视图的方式强制组件重新渲染
 * 解决某些场景下路由参数变化但组件未更新的问题
 */
const flush = () => {
    showRouter.value = false;  // 隐藏路由视图
    nextTick(() => {
        showRouter.value = true;  // 在DOM更新后重新显示路由视图
    });
};

/**
 * 提供刷新功能给子组件
 * 通过provide/inject机制让子组件可以调用flush方法刷新路由视图
 * 必须写在需要注册的方法之后
 */
provide('flush', flush);
</script>

<style scoped>
.el-aside {
    background: #303133;
    height: calc(100vh);
}

.el-header {
    background: #303133;
    height: 35px;
    text-align: right; /* 文本靠右显示 */
}

.user-info-text {
    color: white; /* 确保文本颜色为白色 */
    height: 35px;
    line-height: 35px;
    outline: unset;
}

.user-dropdown-menu {
    background-color: #303133
}

:deep(.el-dropdown-menu__item) {
    background-color: #303133 !important; /* 防止背景颜色变化*/
    color: #FFFFFFFF !important; /* 正常状态下的字体颜色*/
}

:deep(.el-dropdown-menu__item:hover) {
    background-color: #303133 !important; /* 鼠标移入时保持背景颜色*/
    color: #409EFF !important; /* 鼠标移入时保持字体颜色*/
}

.el-footer {
    background: #303133;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: white; /* 设置文本颜色为白色 */
}

.asideTitile {
    color: #f8f8f8;
    text-align: center;
    height: 35px;
    line-height: 35px;
}
</style>